<template>
  <v-app>
    <GoBackTopbar title="支付订单" />
    <v-content class="grey lighten-3">
      <v-card class="pa-12 d-flex flex-column" flat tile outlined>
        <v-img
          src="https://files-bucket.oss-cn-hangzhou.aliyuncs.com/order.png"
          aspect-ratio="3.5"
          contain
        ></v-img>
        <span class="text-center subtitle-1 text--secondary mt-2"
          >提交订单成功
        </span>
        <span class="text-center subtitle-2 text--secondary"
          >请在01小时00分00秒内完成支付
        </span>
        <div class="text-center subtitle-2">
          <span class="text--secondary mr-3">支付金额</span>
          <span
            class="red--text"
            v-text="`￥${$store.state.currPayableTotalAmount}`"
          ></span>
        </div>
        <span class="text-center subtitle-2">
          <router-link style="color: #2AB795" to="/myOrders"
            >查看订单列表
          </router-link>
        </span>
      </v-card>
      <v-card class="mt-4" flat tile outlined>
        <v-list class="py-0" flat dense>
          <v-subheader>支付方式</v-subheader>
          <v-divider></v-divider>
          <v-list-item-group>
            <!-- <v-list-item @click="payInType(1)">
              <v-list-item-content>
                <v-list-item-title>支付宝</v-list-item-title>
              </v-list-item-content>
              <v-list-item-icon>
                <v-icon>mdi-chevron-right</v-icon>
              </v-list-item-icon>
            </v-list-item>
            <v-divider></v-divider> -->
            <v-list-item @click="payInType(0)">
              <v-list-item-content>
                <v-list-item-title>微信支付</v-list-item-title>
              </v-list-item-content>
              <v-list-item-icon>
                <v-icon>mdi-chevron-right</v-icon>
              </v-list-item-icon>
            </v-list-item>
            <!-- <v-divider></v-divider>
            <v-list-item @click="payInType(3)">
              <v-list-item-content>
                <v-list-item-title>Apple Pay</v-list-item-title>
              </v-list-item-content>
              <v-list-item-icon>
                <v-icon>mdi-chevron-right</v-icon>
              </v-list-item-icon>
            </v-list-item> -->
          </v-list-item-group>
        </v-list>
      </v-card>
    </v-content>
  </v-app>
</template>

<script>
import GoBackTopbar from '@/components/GoBackTopbar.vue';
import request from '@/request';

export default {
  name: 'payment',
  components: { GoBackTopbar },
  methods: {
    payInType(payType) {
      const orderId = this.$route.query.id;
      const status = 1;
      request.put(`/orders/${orderId}`, { payType, status }).then(() => {
        this.$router.push(`/paymentResult?id=${orderId}`);
      });
    }
  }
};
</script>
